<template>
  <div>
      <!-- 通用工具栏 -->
      <navSearch :show-before="false" :formList="formList" @btnSearch="btnSearch" ref="resetForm">
      </navSearch>
    <el-row>
      <el-col :span="4">
        <el-card class="mCard">
            店铺订单收益：<span>{{storeOrderMoney}}</span>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="mCard">
            素材收益：<span>{{materialMoney}}</span>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card   class="mCard">
            素材抽佣收益：<span>{{materialMoney}}</span>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card   class="mCard">
            店铺权益收益：<span>{{storeEquities}}</span>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card   class="mCard">
            平台总收益：<span>{{storeOrderMoney+materialMoney+materialMoney+storeEquities}}</span>
        </el-card>
      </el-col>
    </el-row>
   <el-table :data="tableData" border>
    <el-table-column prop="tradeType" label="交易类型" align="center"></el-table-column>
    <el-table-column prop="storeId" label="店铺ID/用户ID" align="center"></el-table-column>
    <el-table-column prop="storeName" label="店铺名称/昵称" align="center"></el-table-column>
    <el-table-column prop="orderNumber" label="订单号" align="center"></el-table-column>
    <el-table-column prop="transactionAmount" label="交易金额" align="center"></el-table-column>
    <el-table-column prop="smokeCommission" label="抽佣金额" align="center"></el-table-column>
    <el-table-column prop="platformEarnings" label="平台收益" align="center"></el-table-column>
    <el-table-column
        prop="updatedAt"
        label="交易时间"
        align="center">
         <template slot-scope="obj">
            {{ obj.row.updatedAt | formatDate }}
          </template>
      </el-table-column>
    <!-- <el-table-column prop="updatedAt" label="交易时间" align="center"></el-table-column> -->
  </el-table>
</div>
</template>

<style>
.mCard{
border: 1px solid skyblue;
 margin-bottom: 15px;
 margin-left: 5px
}
</style>

<script>
import { getIncome } from '@/api/platformExpend'
// import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      formList: {
        store: true,
        tradeType: true,
        orderNum: true,
        // date: true
      },
      tableData: [],
      storeOrderMoney: 0,
      materialMoney: 0,
      materialCommission: 0,
      storeEquities: 0
    }
  },
 
  computed: {
    // ...mapGetters([
    //   'expenditures'
    // ])
  },
  created () {
    this.getGoodsList()
  },
  methods: {
    async getGoodsList () {
      this.tableData = await getIncome()
      console.log(this.tableData)
      this.storeOrderMoney = this.comp('店铺订单')
      this.materialMoney = this.comp('素材收益')
      this.materialCommission = this.comp('素材抽佣')
      this.storeEquities = this.comp('店铺权益')
    },
     btnSearch (formData) {
      const { store, tradeType,order } = formData
      console.log(formData);
      if (store || user || tradeType||order) {
        const arr = this.tableData.filter(item => item.storeId === store || store === '').filter(item => item.tradeType === tradeType || tradeType === '').filter(item => item.orderNumber === order || order === '')
        this.tableData = arr
        this.$refs.resetForm.btnReset()
      } else {
        this.getGoodsList()
      }
    },
    comp (shuxing) {
      const arr = []
      this.tableData.forEach(item => {
        if (item.tradeType === shuxing) {
          arr.push(item.transactionAmount)
        }
      })
      const result = arr.reduce((a, b) => {
        a = Number(a) + Number(b)
        return parseInt(a)
      }, 0)
      return result
    }
  }
}
</script>
